import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

class TestAlignWidget extends StatefulWidget {
  const TestAlignWidget({super.key});

  @override
  State<TestAlignWidget> createState() {
    return _AlignState();
  }
}

class _AlignState extends State<TestAlignWidget> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("基础 Align 学习使用 ,类似Android的FrameLayout"),
      ),
      body: SingleChildScrollView(
        scrollDirection: Axis.vertical,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            const Text(">>>>>> 类似Android的相对布局"),
            ConstrainedBox(
                constraints: BoxConstraints(maxWidth: 120, minHeight: 120),
                child: Container(
                  color: Colors.blue.shade50,
                  child: Align(
                    alignment: Alignment.topRight,
                    child: FlutterLogo(
                      size: 60,
                    ),
                  ),
                )),
            const Text(">>>>>> widthFactor / heightFactor 相对于子布局的 倍数 2，2"),
            Container(
              color: Colors.blue.shade50,
              child: Align(
                widthFactor: 2,
                heightFactor: 2,
                alignment: Alignment.topRight,
                child: FlutterLogo(
                  size: 60,
                ),
              ),
            ),
            const Text(">>>>>> widthFactor / heightFactor 相对于子布局的 倍数 0.5，0.5"),
            Container(
              color: Colors.blue.shade50,
              child: Align(
                widthFactor: 0.5,
                heightFactor: 0.5,
                alignment: Alignment.topRight,
                child: FlutterLogo(
                  size: 60,
                ),
              ),
            ),
            const Text(">>>>>> 自定义 Alignment(0, 0)"),
            const Text(">>>>>> 自定义 Alignment(0, 0)"),
            Container(
              color: Colors.blue.shade50,
              child: Align(
                widthFactor: 2,
                heightFactor: 2,
                alignment: Alignment(0, 0),
                child: FlutterLogo(
                  size: 60,
                ),
              ),
            ),

            DecoratedBox(
              decoration: BoxDecoration(color: Colors.red),
              child: Center(
                child: Text("xxx"),
              ),
            ),
            DecoratedBox(
              decoration: BoxDecoration(color: Colors.red),
              child: Center(
                widthFactor: 1,
                heightFactor: 1,
                child: Text("xxx"),
              ),
            )
          ],
        ),
      ),
    );
  }
}
